﻿@model BathhouseService.Areas.WX.Models.AccountVMs.RegisteredVM
@{
    ViewData["Title"] = "个人信息修改";
    Layout = "~/Areas/WX/Views/Shared/_Layout.cshtml";
}

@section Tops{
    <style>
        .backg {
            background: #F4F5F6;
        }

        .remindont {
            color: red;
            margin-left: 24%;
        }

        .select {
            width: 230px;
            background: white;
        }
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }

            .file input {
                position: absolute;
                font-size: 100px;
                right: 0;
                top: 0;
                opacity: 0;
            }

            .file:hover {
                background: #AADFFD;
                border-color: #78C3F3;
                color: #004974;
                text-decoration: none;
            }
    </style>
}


<header class="hui-header">
    <div id="hui-back"></div>
    <h1>个人信息修改</h1>
</header>


<form class="hui-wrap" id="form1" method="post" enctype="multipart/form-data">
    <div class="hui-center-title" style="margin-top: 35px;"><h1 style="border:0px;">个人信息修改</h1></div>
    <div asp-validation-summary="All"></div>
    <div style="margin:20px 10px; margin-bottom:15px;" class="hui-form" id="form1">


       
        <div class="hui-form-items">
            <div class="hui-form-items-title">个人头像</div>
            <a href="javascript:;" class="file">
                点击上传
                <input type="file" name="upfile" id="upfile" class="imgInput">
            </a>
        </div>
        @if (Model.ImgId != null)
        {
            <div>
                <img src="/api/_file/GetFile/@Model.ImgId" width="100%" height="200" class="img" />
            </div>
        }
        else
        {
            <div>
                <img src="" class="img" />
            </div>
        }


        <input type="hidden" asp-for="ImgId" />
        <input type="hidden" asp-for="Id" />

        <div class="hui-form-items">
            <div class="hui-form-items-title">登录账号</div>
            <input type="text" class="hui-input hui-input-clear" placeholder="登录账号" asp-for="ITCode" />

        </div>


        <div>
            <span asp-validation-for="ITCode" class="remindont"></span>
        </div>

        <div class="hui-form-items">
            <div class="hui-form-items-title">姓名</div>
            <input type="text" class="hui-input hui-input-clear" placeholder="请输姓名" asp-for="Name" />

        </div>

        <div>
            <span asp-validation-for="Name" class="remindont"></span>
        </div>


    </div>



    <div style="padding:10px; padding-top:10px;">
        <button type="submit" class="hui-button hui-button-large hui-primary" id="submit">修改</button>
    </div>
</form>


@section Scripts{


    <script>
          $(".imgInput").change(function () {
              $(".img").attr("src", URL.createObjectURL($(this)[0].files[0]));
              $(".img").attr("width", "100%");
              $(".img").attr("height","200");
                data = new FormData($('#form1')[0]);
                $.ajax({
                    url: '/api/_file/Upload',
                    type: 'post',
                    // 设置的是请求参数
                    data: data,
                    // 用于设置响应体的类型 注意 跟 data 参数没关系！！！
                    dataType: 'json',
                    processData: false,  //不处理发送的数据，因为data值是FormData对象，不需要对数据做处理
                    contentType: false,  //不设置Content-type请求头
                    success: function (res) {
                        $('#ImgId').val(res.Id);
                    },
                    error: function (xhr) {
                        alert("账号或密码错误");
                    },
                })
            });
        



    </script>
}

